
import { NavBar, Icon, Tabs, Toast } from 'antd-mobile';
import { connect } from 'react-redux';
import { getUser, setPgc, setTheme, removeTheme, removePgc, getUserAuthor, getUserTheme } from '../../action/action';
import { getCookie, setCookie } from '../../js/cookie';
import "./index.scss"
const tabs = [
    { title: "账号" },
    { title: "主题" },
];
@connect(
    (state) => {
        return {
            userData: state.my.userData,
            userAuthorData: state.my.userAuthorData,
            userThemeData: state.my.userThemeData,
        }
    }
)
export class MyAttention extends React.Component {
    componentDidMount() {
        let { dispatch } = this.props;
        dispatch(getUser(getCookie("ky_uid"), (data) => {
            dispatch(getUserAuthor(data.result.uatt_pgc, (data) => {
            }));
            dispatch(getUserTheme(data.result.uatt_theme, (data) => {
            }));
        }));
    }
    setAtt(id, theme) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (theme.indexOf(id) == -1) {
                dispatch(setTheme(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            } else {
                dispatch(removeTheme(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            }
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    setAttPgc(id, pgc) {
        let { dispatch } = this.props;
        if (getCookie("ky_uid")) {
            if (pgc.indexOf(id) == -1) {
                dispatch(setPgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            } else {
                dispatch(removePgc(getCookie("ky_uid"), id, (data) => {
                    if (data.code == 1) {
                        Toast.success(data.msg, 1);
                    } else {
                        Toast.fail(data.msg, 1);
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => { }));
                }))
            }
        } else {
            Toast.info("未登录，请先登录");
        }
    }
    render() {
        let { userData, userAuthorData, userThemeData } = this.props;
        let attBox = null;
        let themeBox = null;
        if (userData) {
            if (userAuthorData) {
                if (userData.result.uatt_pgc.length !== 0) {
                    attBox = userAuthorData.map((item, index) => {
                        return (
                            <li key={index}>
                                <div className="info cl">
                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.pgcInfo.id); }}>
                                        <div className="via">
                                            <img src={item.pgcInfo.icon} />
                                        </div>
                                        <div className="msg">
                                            <h4>{item.pgcInfo.name}</h4>
                                            <p>{item.pgcInfo.description}</p>
                                        </div>
                                    </a>
                                    <span onClick={() => { userData ? this.setAttPgc(item.pgcInfo.id, userData.result.uatt_pgc) : Toast.info("未登录，请先登录", 1) }}>{userData && userData.result.uatt_pgc.indexOf(item.pgcInfo.id) != -1 ? "已关注" : "+关注"}</span>
                                </div>
                            </li>
                        )
                    })
                }
            }
            if (userThemeData) {
                if (userData.result.uatt_theme.length !== 0) {
                    themeBox = userThemeData.map((item, index) => {
                        return (
                            <li key={index}>
                                <div className="info cl">
                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/detail/dtrec/" + item.tagInfo.id); }}>
                                        <div className="via">
                                            <img src={item.tagInfo.headerImage} />
                                        </div>
                                        <div className="msg">
                                            <h4>#{item.tagInfo.name}</h4>
                                            <p>{item.tagInfo.description}</p>
                                        </div>
                                    </a>
                                    <span onClick={() => { userData ? this.setAtt(item.tagInfo.id, userData.result.uatt_theme) : Toast.info("未登录，请先登录", 1) }}>{userData && userData.result.uatt_theme.indexOf(item.tagInfo.id) != -1 ? "已关注" : "+关注"}</span>
                                </div>
                            </li>
                        )
                    })
                }
            }
            return (
                <div className="myAttention">
                    <header>
                        <NavBar
                            mode="light"
                            icon={<Icon type="left" />}
                            onLeftClick={() => this.props.history.push("/my")}
                        >我的关注
                        </NavBar>
                    </header>
                    <main>
                        <nav>
                            <Tabs tabs={tabs}
                                initialPage={0}
                                useOnPan={true}
                            >
                                <div className="data-box" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                                    <ul>
                                        {attBox}
                                    </ul>
                                </div>
                                <div className="data-box" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' }}>
                                    <ul>
                                        {themeBox}
                                    </ul>
                                </div>
                            </Tabs>
                        </nav>
                    </main>
                </div>
            )
        } else {
            return (
                <div></div>
            )
        }
    }
}